<template>
    <div class="pageList">
        <button @click="changePageNum(1)"><img src="../../assets/images/indexRight.png" alt="" /></button>
        <Page
            :current="pageNum"
            :total="total"
            :page-size="pageSize"
            @on-change="changePageNum"
            @on-page-size-change="changePageSize"
            :page-size-opts="[10, 20, 50, 100]"
            show-total
            show-elevator
            show-sizer
        ></Page>
        <button @click="toLastPage"><img src="../../assets/images/indexLeft.png" alt="" /></button>
    </div>
</template>

<script>
export default {
    name: 'index',
    props: {
        pageNum: {
            type: Number
        },
        pageSize: {
            type: Number,
            default: 10
        },
        total: {
            type: Number
        }
    },
    methods: {
        changePageNum(v) {
            this.$emit('changePageNum', v);
        },
        changePageSize(v) {
            this.$emit('changePageSize', v);
        },
        toLastPage() {
            let pages = parseInt(this.total / this.pageSize) + (this.total % this.pageSize > 0 ? 1 : 0);
            this.changePageNum(pages);
        }
    }
};
</script>

<style lang="less">
.pageList {
    display: flex;
    justify-content: space-between;

    button {
        display: inline-block;
        vertical-align: middle;
        min-width: 0.166667rem;
        height: 0.166667rem;
        line-height: 0.15625rem;
        margin-right: 0.020833rem;
        text-align: center;
        list-style: none;
        background-color: #fff;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: pointer;
        font-family: Arial;
        font-weight: 500;
        border: 0.005208rem solid #dcdee2;
        border-radius: 0.020833rem;
        -webkit-transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
        transition: border 0.2s ease-in-out, color 0.2s ease-in-out;
    }

    .ivu-page {
        margin: 0 0.020833rem;
    }

    .ivu-page-item-active {
        background: #2d8cf0;

        a {
            color: #fff;
        }
    }
}
</style>
